Seed design system for OpenClaw Windows Hub by karkarl · Pull Request #962 · openclaw/openclaw-windows-node

karkarl · 2026-07-10T18:21:26Z

Seeds a design system under .agents/design/ for the OpenClaw Windows Hub (WinUI 3 tray app), named Windows Fluent UI for OpenClaw. No application code is changed — this only adds files under .agents/design/.

Built with Colophon

Authored and previewed with the Colophon Copilot plugin — an experimental design-system canvas that treats .agents/design/ as the source of truth and renders design.json + components.jsx live (and feeds them back to Copilot when it builds UI). The tokens here were seeded from the app's own WinUI/Fluent surfaces and refined in the canvas.

What's included

design.json — token source of truth: colors, typography, spacing, radii, shadows, brand metadata. Tokens are derived from the app's real Fluent/WinUI usage (SystemAccentColor, Card/Subtle fill colors, Segoe UI Variable, Cascadia Mono) via manual XAML/C# inspection (the CSS scanner finds 0 files in a XAML repo).
components.jsx — living component patterns rendered in the Design System canvas: Button, Field, Card, Badge, plus chat patterns (ChatBubble, ChatComposer, ChatThread) grounded in the native chat code.
principles.md — prose companion: voice, personality, and Fluent-first principles ("defer to Windows", one-accent, no hard-coded hex).

Chat components

ChatBubble — user (right, accent, no chrome) vs assistant (left, surface + 1px line, 36px avatar), muted timestamp footer; assistant footer adds usage string + inline copy button. Mirrors OpenClawChatTimeline metrics.
ChatComposer — GitHub-Copilot-style toolbar: Add(+) / model / reasoning pickers on the left, mic + accent Send on the right, using WinUI SubtleButton hover/pressed tokens.

Tokens of note

radii: added bubble (16px) matching the native chat bubble corner radius.
colors: added subtleHover / subtlePressed for subtle/transparent controls (Fluent SubtleFillColorSecondary/Tertiary).

Validation

All 8 canvas exports transpile and render through the extension's Babel (classic runtime) + new Function pipeline.
design.json validated as JSON.

Stacked work

A follow-up branch applies the ChatComposer pattern to the real app chat UI (stacked on this branch): karkarl#1.

Co-authored-by: Copilot App 223556219+Copilot@users.noreply.github.com

Add .agents/design/ (design.json, components.jsx, principles.md) with tokens derived from the WinUI 3/XAML surfaces. The app themes off Windows Fluent system resources, so color/type/radius tokens map to Fluent (SystemAccentColor, Segoe UI Variable, Cascadia Mono) rather than a bespoke palette. No application code changed. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Refine control padding to WinUI defaults (Button 11,5,11,6 with 100px min-width; Field TextControlThemePadding 10,5,6,6, min-height 32; Card Gallery padding 16,12) and add reusable chat components grounded in the native timeline and composer: ChatBubble, ChatComposer, ChatThread. Add a 'bubble' (16px) radius token mirroring OpenClawChatTimeline CornerRadius and point ChatBubble at var(--radius-bubble). Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Distinguish user vs assistant bubbles and enrich the assistant footer to match the native timeline (OpenClawChatTimeline): - Add a 36x36 circular assistant avatar (subtle fill + 1px line border, top-aligned, 8px gap) left of the agent bubble; user bubbles show none, mirroring showUserAvatar=false. Sparkle glyph stands in for the app logo. - Give every bubble a muted timestamp footer; assistant footer also shows the context-usage readout (ChatUsageFormatter's used/context (pct%)) with a subtle inline Copy affordance right of the usage text. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Mirror the GitHub Copilot composer layout: left cluster = Add, model picker, reasoning-effort picker; right cluster = mic + Send. Only Send carries the accent; every other control is subtle chrome. Give the icon buttons and inline pickers WinUI SubtleButtonStyle interaction states — SubtleFillColorSecondary on hover, the lighter SubtleFillColorTertiary on press, glyph/label darkening to primary text, 120ms ease-out. Add subtleHover / subtlePressed tokens (Fluent subtle fills) so no hex is hard-coded in the component. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

clawsweeper · 2026-07-10T18:35:24Z

Codex review: needs real behavior proof before merge. Reviewed July 10, 2026, 4:30 PM ET / 20:30 UTC.

Summary
Adds three files under .agents/design/ containing Fluent-style design tokens, written principles, and eight JSX component examples for future Windows Hub UI generation.

Reproducibility: yes. for the review concerns: the unchanged PR head and current-main native chat source directly reproduce all three contract mismatches with high confidence; no runtime bug reproduction is applicable.

Review metrics: 3 noteworthy metrics.

Prior findings: 3 unresolved. The PR head is unchanged from the latest completed review, and each previously reported contract mismatch remains.
Proof coverage: 3 screenshots, 3 of 8 exports visible. Proof improved, but it still does not cover the whole catalog or theme/parity claims.
Guidance scope: 3 files, 529 additions. Although runtime code is unchanged, the new catalog is intended to influence future Copilot-generated UI across the product.

Merge readiness
Overall: 🦐 gold shrimp
Proof: 🦐 gold shrimp
Patch quality: 🦐 gold shrimp
Result: blocked until stronger real behavior proof is added.

Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch.

Rank-up moves:

Resolve or explicitly reframe all three native-parity findings.
[P1] Add current-head screenshots or a recording covering all eight exports plus dark and high-contrast behavior.
Obtain maintainer confirmation of the canonical source and synchronization owner.

Proof guidance:

[P1] Needs stronger real behavior proof before merge: Three current-head screenshots directly show tokens and the chat examples, but they cover only three of eight exports and visibly retain the theme and native-contract mismatches; add redacted full-gallery and theme proof, update the PR body, and request @clawsweeper re-review if review does not retrigger.

Risk before merge

[P1] Merging establishes a second Copilot-consumed UI authority without an identified synchronization owner, so future generated UI can drift from canonical native WinUI behavior while still appearing repository-approved.
[P1] The catalog's fixed light palette can guide generated UI toward inaccessible dark or high-contrast behavior despite the accompanying prose promising semantic Windows theming.
[P1] The screenshots show the proposed output but do not prove all exported patterns or corrected parity, so the current branch cannot support its source-of-truth and native-mirroring claims.

Maintainer options:

Fix Parity and Establish Ownership (recommended)
Align semantic themes and complete native chat contracts, document canonical ownership and synchronization, then add full current-head visual proof before merge.
Approve an Explicit Redesign
Accept the divergence only after a maintainer deliberately defines this catalog as future-state design and owns its rollout and maintenance.
Pause the Parallel Authority
Close or defer the PR if the repository does not want the ongoing cost and ambiguity of synchronizing a second UI source.

Next step before merge

[P1] A maintainer must first choose the catalog's authority model and owner; after that choice, the contributor can make the mechanical parity fixes and supply complete current-head proof.

Maintainer decision needed

Question: Should .agents/design/ be accepted as derived guidance that must mirror canonical native WinUI, approved as an intentional future-state redesign, or declined as a parallel UI authority?
Rationale: The concrete parity defects are repairable, but code review cannot decide whether this new Copilot-consumed design source belongs in the repository or who must keep it synchronized as native UI evolves.
Likely owner: kenehong — The catalog primarily models chat composer and timeline behavior where repository history shows the strongest sustained design ownership.
Options:
- Mirror Native WinUI (recommended): Treat native XAML/C# as canonical, fix all parity gaps, assign a synchronization owner, and require complete current-head visual proof.
- Approve Future-State Design: Keep deliberate differences only after removing current-parity claims and explicitly owning the catalog as the approved redesign direction.
- Keep Native Sources Only: Decline the parallel design authority and continue using native implementation, tests, and existing documentation as the UI contract.

Security
Cleared: The effective patch adds static design guidance only and introduces no dependency, workflow, permission, secret-handling, downloaded-code, or runtime execution change.

Review findings

[P2] Model semantic Windows themes instead of a fixed light palette — .agents/design/design.json:24-35
[P2] Match the composer pattern to the native control contract — .agents/design/components.jsx:325-345
[P2] Preserve the native assistant footer actions — .agents/design/components.jsx:149-175

Review details

Best possible solution:

If maintainers want this surface, make native XAML/C# the explicit canonical source, represent Windows theme resources semantically rather than as one fixed palette, cover the complete native chat contracts, assign a synchronization owner, and attach current-head gallery proof for every export and supported theme; otherwise keep native sources as the sole UI contract.

Do we have a high-confidence way to reproduce the issue?

Yes for the review concerns: the unchanged PR head and current-main native chat source directly reproduce all three contract mismatches with high confidence; no runtime bug reproduction is applicable.

Is this the best way to solve the issue?

No in its current form; the maintainable path is either a fully derived, owned, semantically themed catalog with complete parity proof or an explicitly approved future-state redesign, not an ambiguous parallel source.

Full review comments:

[P2] Model semantic Windows themes instead of a fixed light palette — .agents/design/design.json:24-35
Replace the light-only hex/RGBA token set with semantic light, dark, high-contrast, and system-accent mappings. As written, Copilot consumes fixed light values even though the same catalog says generated UI must follow Windows theme resources, so dark and high-contrast output can violate the stated contract.
Confidence: 0.99
[P2] Match the composer pattern to the native control contract — .agents/design/components.jsx:325-345
Model the established Channel/Model/Reasoning selector row and Attach/Mic/More/Send action row, or explicitly label this as an approved redesign. The current example omits channel and more while moving controls into a different toolbar, so code generated from this claimed native-derived pattern will diverge from OpenClawComposer.
Confidence: 0.99
[P2] Preserve the native assistant footer actions — .agents/design/components.jsx:149-175
Include the native Read aloud/Stop action alongside Copy, timestamp, and optional usage, or remove the claim that this mirrors the timeline. The current example teaches an incomplete assistant-message contract and can propagate that omission into generated UI.
Confidence: 0.99

Overall correctness: patch is incorrect
Overall confidence: 0.99

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning high; reviewed against 053501c6dfae.

Label changes

Label changes:

add proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. Three current-head screenshots directly show tokens and the chat examples, but they cover only three of eight exports and visibly retain the theme and native-contract mismatches; add redacted full-gallery and theme proof, update the PR body, and request @clawsweeper re-review if review does not retrigger.
add rating: 🦐 gold shrimp: Overall readiness is 🦐 gold shrimp; proof is 🦐 gold shrimp and patch quality is 🦐 gold shrimp.
remove rating: 🧂 unranked krab: Current PR rating is rating: 🦐 gold shrimp, so this older rating label is no longer current.

Label justifications:

P2: This is a normal-priority design and developer-guidance feature with bounded current impact, but it needs resolution before becoming an approved repository authority.
merge-risk: 🚨 other: Merging can create an unsynchronized parallel design authority that guides future UI away from canonical native behavior, a risk not settled by CI.
rating: 🦐 gold shrimp: Overall readiness is 🦐 gold shrimp; proof is 🦐 gold shrimp and patch quality is 🦐 gold shrimp.
status: 📣 needs proof: The PR needs real behavior proof before ClawSweeper can clear the contributor ask. Needs stronger real behavior proof before merge: Three current-head screenshots directly show tokens and the chat examples, but they cover only three of eight exports and visibly retain the theme and native-contract mismatches; add redacted full-gallery and theme proof, update the PR body, and request @clawsweeper re-review if review does not retrigger.
proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. Three current-head screenshots directly show tokens and the chat examples, but they cover only three of eight exports and visibly retain the theme and native-contract mismatches; add redacted full-gallery and theme proof, update the PR body, and request @clawsweeper re-review if review does not retrigger.

Evidence reviewed

What I checked:

Repository policy applies: The full repository policy requires current-head visible proof for tray UX and agent-facing instructions, and requires non-trivial UI work to preserve concrete native behavior rather than claim success without proof. (AGENTS.md:45, 053501c6dfae)
Fixed light palette conflicts with semantic theme claim: The proposed token source hard-codes light-theme text, background, border, accent, and subtle-control values while its principles say generated UI must follow Windows light, dark, high-contrast, and system-accent semantics. (.agents/design/design.json:24, 536aa362fee7)
Composer contract mismatch: Current main documents and implements a three-row native composer with Channel, Model, and Reasoning selectors plus right-aligned Attach, Mic, More, and Send actions; the proposed example instead models a two-row GitHub-Copilot-style toolbar and omits the channel and more contracts. (src/OpenClaw.Tray.WinUI/Chat/OpenClawComposer.cs:22, 4166e0fd63f8)
Assistant footer contract mismatch: Current main renders both Copy and Read aloud/Stop actions after timestamp and optional usage, while the proposed assistant footer includes Copy only despite claiming to mirror the native timeline. (src/OpenClaw.Tray.WinUI/Chat/OpenClawChatTimeline.cs:975, 4166e0fd63f8)
Current-head proof remains incomplete: The three PR-body images are viewable and show brand/tokens plus ChatBubble, ChatComposer, and ChatThread output, but they do not show all eight exports, dark/high-contrast variants, or corrected parity with the native contracts. (.agents/design/components.jsx:1, 536aa362fee7)
Re-review continuity: The current PR head is identical to the latest reviewed SHA, so all three previously reported blockers remain unresolved rather than being late findings. (536aa362fee7)

Likely related people:

kenehong: Git history shows the strongest sustained ownership of the native chat visual language, including composer, bubble, tool-card, and usage-footer design work that this catalog attempts to model. (role: feature owner; confidence: high; commits: ff38d84, c68bbfe, 2eca2ce; files: src/OpenClaw.Tray.WinUI/Chat/OpenClawComposer.cs, src/OpenClaw.Tray.WinUI/Chat/OpenClawChatTimeline.cs)
RBrid: Introduced the native FunctionalUI chat experience and its initial composer/timeline ownership boundary in commit 08cab69. (role: introduced behavior; confidence: high; commits: 08cab69a038c, 753828f63e96; files: src/OpenClaw.Tray.WinUI/Chat/OpenClawComposer.cs, src/OpenClaw.Tray.WinUI/Chat/OpenClawChatTimeline.cs)
shanselman: Commit 4166e0f is the current provenance anchor for the composer contract and assistant footer lines, and Scott merged that repository state while maintaining adjacent WinUI validation infrastructure. (role: recent merger and adjacent owner; confidence: medium; commits: 4166e0fd63f8; files: src/OpenClaw.Tray.WinUI/Chat/OpenClawComposer.cs, src/OpenClaw.Tray.WinUI/Chat/OpenClawChatTimeline.cs)
calebeden: Recently changed both composer and timeline behavior for queued-message parity, so is relevant to keeping any derived catalog synchronized with current chat contracts. (role: recent area contributor; confidence: medium; commits: c9b5476a873f, 02f2421a5e75; files: src/OpenClaw.Tray.WinUI/Chat/OpenClawComposer.cs, src/OpenClaw.Tray.WinUI/Chat/OpenClawChatTimeline.cs)

What the crustacean ranks mean

🦀 challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
🦪 silver shellfish: thin signal; proof, validation, or implementation needs work.
🧂 unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
🌊 off-meta tidepool: rating does not apply to this item.

Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

How this review workflow works

ClawSweeper keeps one durable marker-backed review comment per issue or PR.
Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
Maintainers can also comment @clawsweeper review to request a fresh review only.
Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

Review history (3 earlier review cycles)

reviewed 2026-07-10T18:34:13.018Z sha 1b2b6bf :: needs real behavior proof before merge. :: [P2] Model Windows theme semantics instead of a fixed light palette | [P2] Match the composer pattern to the native control layout | [P2] Preserve the native assistant footer metadata
reviewed 2026-07-10T20:14:11.864Z sha 536aa36 :: needs real behavior proof before merge. :: [P2] Model semantic Windows themes instead of a fixed light palette | [P2] Match the composer pattern to the native control contract | [P2] Preserve the native assistant footer actions
reviewed 2026-07-10T20:23:13.021Z sha 536aa36 :: needs real behavior proof before merge. :: [P2] Model semantic Windows themes instead of a fixed light palette | [P2] Match the composer pattern to the native control contract | [P2] Preserve the native assistant footer actions

clawsweeper · 2026-07-10T19:56:43Z

ClawSweeper status: review started.

I am starting a fresh review of this pull request: Seed design system for OpenClaw Windows Hub This is item 1/1 in the current shard. Shard 0/1.

This placeholder means the worker is alive and reading the current context. I will edit this same comment with the actual review when the claws are done clicking.

Crustacean status: shell secured, claws on keyboard, evidence pebbles being sorted.

Rename the design system's brand from the product name (OpenClaw Windows Hub) to Windows Fluent UI for OpenClaw, reflecting its basis in Windows Fluent design conventions. Clarify that it is the design system for the OpenClaw Windows Hub app in design.json and principles.md. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

The CSS/JSX scanner finds no files in this XAML repo; every token was derived by manual inspection of the WinUI 3 XAML and C# surfaces. Update meta.updatedBy and meta.note to reflect that accurately. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

karkarl and others added 4 commits July 8, 2026 12:22

karkarl mentioned this pull request Jul 10, 2026

Apply design-system composer to app chat UI karkarl/openclaw-windows-node#1

Draft

karkarl marked this pull request as draft July 10, 2026 19:46

karkarl and others added 2 commits July 10, 2026 12:58

karkarl marked this pull request as ready for review July 10, 2026 20:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Seed design system for OpenClaw Windows Hub#962

Seed design system for OpenClaw Windows Hub#962
karkarl wants to merge 6 commits into
openclaw:mainfrom
karkarl:karkarl-seed-design-system

karkarl commented Jul 10, 2026 •

edited

Loading

Uh oh!

clawsweeper Bot commented Jul 10, 2026 •

edited

Loading

Uh oh!

clawsweeper Bot commented Jul 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

karkarl commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built with Colophon

What's included

Chat components

Tokens of note

Validation

Stacked work

Uh oh!

clawsweeper Bot commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

clawsweeper Bot commented Jul 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

karkarl commented Jul 10, 2026 •

edited

Loading

clawsweeper Bot commented Jul 10, 2026 •

edited

Loading